<template>
  <el-dialog
    :model-value="modelValue"
    title="添加充值金额"
    width="1000"
    destroy-on-close
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <div class="container">
      <div class="form-item">
        <span class="form-item-label">充值金额：</span>
        <div class="form-item-content">
          <el-input-number
            v-model="form.rechargeAmount"
            placeholder="请输入充值金额"
            :min="0"
            :controls="false"
            :precision="2"
            style="width: 100%"
          />
        </div>
      </div>
      <div class="form-item">
        <span class="form-item-label">备注：</span>
        <div class="form-item-content">
          <el-input v-model="form.remark" type="textarea" />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUsersStore, useBillStore } from '@/stores/index'
import { storeToRefs } from 'pinia'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  operationRow: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:modelValue'])
const userStore = useUsersStore()
const billStore = useBillStore()

const form = reactive({
  rechargeAmount: 0,
  remark: ''
})

const formVerify = () => {
  if (form.rechargeAmount === '') {
    ElMessageBox.alert('充值金额不能为空')
    return false
  }
  return true
}

const saveTopUpInfo = () => {
  const balance = (props.operationRow.amount * 100 + form.rechargeAmount * 100) / 100
  const arrLength = billStore.billList.length
  const data = {
    id: arrLength ? billStore.billList[arrLength - 1]?.id + 1 : 1, // 账单id
    consumer: props.operationRow.name, // 消费者
    type: '充值',
    spend: 0,
    target: '/',
    ...form,
    balance, // 余额
    beforeBalance: props.operationRow.amount,
    date: new Date().toLocaleString()
  }
  const billList = [...toRaw(billStore.billList)]
  billList.unshift(data)
  window.nodeApi?.addBillRecord(data).then((res) => {
    ElMessage({
      message: '保存成功',
      type: 'success'
    })
    billStore.billList = billList
    // 更新用户余额
    userStore.updateUserInfo({
      id: props.operationRow.id,
      data: {
        amount: balance
      }
    })
  })
}

const handleConfirm = () => {
  const flag = formVerify()
  if (flag) {
    saveTopUpInfo()
    emit('update:modelValue', false) // 关闭弹窗
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.el-dialog__body) {
  border: 1px solid red;
}
.container {
  width: 800px;
  .form-item {
    width: 600px;
    display: flex;
    margin-top: 24px;
    align-items: center;
    &-label {
      width: 150px;
      // font-size: 18px;
    }
    &-content {
      flex: 1;
      ::v-deep(.el-input-number) {
        .el-input__wrapper {
          .el-input__inner {
            text-align: left;
          }
        }
      }
    }
  }
  .pet-item {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    &-row {
      display: flex;
      align-items: center;
      &-label {
        width: 80px;
      }
    }
  }
}
</style>
